<template>
  <!-- 弹层效果 -->
  <div class='aa-productDetails'>
    <div class='aa-productPicBox' v-if="partItem.images && partItem.images.length>0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in partItem.images" :key="item">
          <image :src="item" class="slide-image" mode='aspectFit' @click='loadimg(item)' />
          <img :src="item" class="slide-image" @click='loadimg(item)' alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class='aa-productNameAndCode'>
      <div class='aa-productNameBox'>
        <span>{{partItem.brandName}} {{partItem.partsNo}}</span>
        <span class='aa-seriesLabel' v-if="partItem.series">{{partItem.series}}</span>
        <span class='aa-importLabel' v-if="partItem.place">{{partItem.place}}</span>
      </div>
      <div class='aa-otherCodeBox' v-if="partItem.otherCodes_text">
        <span class='aa-otherCodeName'>其他编码：</span>
        <span>{{partItem.otherCodes_text}}</span>
      </div>
    </div>
    <div class='aa-productParameter' v-if="partItem.properties &&partItem.properties.length>0">
      <div class='aa-singleParameter' v-for="item in partItem.properties" :key="item.value">
        <span class='aa-left'>{{item.name}}</span>
        <span class='aa-right'>{{item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    partItemInfoDialog_input: {
      type: Object,
      value: {}
    }
  },
  data() {
    return {
      imgUrls: [],
      partItemId: 0, //产品ID
      partItem: {}, //产品详情
    }
  },
  created() {
    this.partItemId = this.partItemInfoDialog_input.partItemId
    this.GetPartItemDetail();
  },
  methods: {
    async GetPartItemDetail() {
      //已经加载过就无需再次请求了
      if (this.partItem.partItemId > 0) return;
      const res = await this.$appServive({
        url: "/Misc/GetPartItemDetail_ForShop",
        data: {
          partItemId: this.partItemId
        },
        isShowLoading: true,
      });
      console.log('res', res);
      res.otherCodes_text = (res.otherCodes || []).join(',');
      this.partItem = res;
      this.imgUrls = res.images || [];
    },
    //关不当前弹层
    on_close_click() {
      this.$emit('close', '');
    },
    loadimg(current) {
      this.$wx.previewImage({
        images: [
          current,
        ],
        closeable: true,
      });
    }
  }
}
</script>

<style scpoed>
/* 商品详情弹层 */
.aa-productDetails {
  width: 100%;
  float: left;
  clear: left;
}
.aa-productPicBox,
.aa-productPicBox swiper {
  width: 100%;
  height: 5.6rem;
  float: left;
  clear: left;
}
.slide-image {
  width: 100%;
  height: 100%;
}
.aa-productNameAndCode {
  width: 100%;
  /* border-bottom: .32rem solid #EDF1F6; */
  float: left;
  clear: left;
}
.aa-productNameBox {
  width: 100%;
  background: #fafafa;
  padding: 0.16rem 0.32rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-productNameBox span {
  width: auto;
  margin: 0 0.08rem;
  font-size: 0.37rem;
  line-height: 0.64rem;
  text-align: left;
  color: #181818;
  float: left;
  clear: none;
}
.aa-productNameBox text.aa-seriesLabel {
  height: 0.48rem;
  padding: 0 0.08rem;
  margin: 0.08rem;
  background: #3498db;
  border-radius: 0.16rem 0.08rem 0.16rem 0.08rem;
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #fff;
}
.aa-productNameBox text.aa-importLabel {
  height: 0.48rem;
  padding: 0 0.08rem;
  margin: 0.08rem;
  background: #e74c3c;
  border-radius: 0.16rem 0.08rem 0.16rem 0.08rem;
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #fff;
}
.aa-otherCodeBox {
  width: 100%;
  padding: 0.16rem 0.4rem 0.16rem 0.32rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.aa-otherCodeBox > span {
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: justify;
  color: #282828;
  word-wrap: break-word;
  word-break: normal;
  float: left;
  clear: none;
  margin: 0 0.08rem;
}
.aa-otherCodeBox > text.aa-otherCodeName {
  width: 1.6rem;
  margin-left: -1.6rem;
  color: #666;
}
.aa-productParameter {
  width: 100%;
  padding-left: 0.4rem;
  float: left;
  clear: left;
}
.aa-singleParameter {
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
  padding: 0.16rem 0.4rem 0.16rem 0;
  float: left;
  clear: left;
}
.aa-singleParameter span {
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: left;
  float: left;
  clear: none;
}
.aa-singleParameter text.aa-left {
  width: 32%;
  color: #666;
}
.aa-singleParameter text.aa-right {
  width: 68%;
  color: #282828;
}
.fi-productParameterNodata {
  width: 100%;
  height: auto;
  min-height: 5.6rem;
  padding-left: 0.32rem;
  background: #fff
    url()
    no-repeat center center;
  background-size: 2.24rem;
  border-top: 1px solid #d8d8d8;
  /* border-bottom: 1px solid #d8d8d8; */
  float: left;
  clear: left;
}
.my-swipe {
  height: 5.6rem;
}
.my-swipe .slide-image {
  object-fit: contain;
  object-position: center;
}
</style>
